<template>
  <div class="agenda container-fluid">
    <div id="filterbar">
        <div class="input-group">
            <a v-on:click.stop.prevent="searchForToday(0)" href="#" class="btn btn-default input-group-addon" >Today</a>
            <a v-on:click.stop.prevent="searchForToday(1)" href="#" class="btn btn-default input-group-addon" style="border-right:0">+1D</a>
            <a v-on:click.stop.prevent="searchForToday(2)" href="#" class="btn btn-default input-group-addon" style="border-right:0">+2D</a>
            <input type="date" class="form-control" v-model="date" v-bind:value="date" v-bind:min="date">
            <span class="input-group-btn">
                <button class="btn btn-default" type="button" v-on:click="searchForDate()" >Search</button>
            </span>
        </div>
    </div>
    <div class="row" v-if="agendas.length == 0" >
        <div class="col-md-12 col-xs-12 text-center">No agenda</div>
    </div>
    <div class="row" v-if="agendas.length > 0" v-for="ag in agendas">
        <div class="col-md-3 col-xs-6">{{ ag.date }} {{ ag.time }}</div>
        <div class="col-md-1 col-xs-3">{{ ag.teamA }}</div>
        <div class="col-md-2 col-xs-3 text-right">{{ ag.teamB }}</div>
        <div class="col-md-3 col-xs-6">{{ ag.name }} {{parseFloat(ag.rating).toFixed(2)}}</div>
        <div class="col-md-1 col-xs-2">{{ ag.ratioWin }}</div>
        <div class="col-md-1 col-xs-2 text-center">{{ ag.ratioEven }}</div>
        <div class="col-md-1 col-xs-2 text-right">{{ ag.ratioLose }}</div>
    </div>
  </div>
</template>

<script>
    /* eslint-disable */
    import service from '@/core/service'
    import eventBus from '@/core/eventBus'
    import moment from 'moment'

    var data = {
        agendas: [],
        date: moment().format("YYYY-MM-DD")
    }

    export default {
        name: 'agenda',
        created() {
            this.searchForDate();
            var self = this;
            eventBus.$on('refreshAgenda', () => {
                self.searchForDate();
            });
        },
        beforeDestroy() {
            eventBus.$off('refreshAgenda');
        },
        methods: {
            tofixed: function(d) {
                return parseFloat(d).toFixed(2);
            },
            searchForDate: function() {
                this.$Progress.start();
                service.getAgenda(this.date).then((d) => {
                    this.agendas = d;
                    this.$Progress.finish();
                });
            },
            searchForToday: function(day) {
                let d = moment().add(day, 'day');
                this.date = d.format("YYYY-MM-DD");
                this.searchForDate(d);
            }
        },
        data() {
            return data
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .agenda .row {
        padding: 10px 0 10px;
        border-bottom: 1px solid #ddd;
    }
    
    #filterbar {
        background: #fff;
        padding: 10px 0 5px;
    }
</style>